<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>请假流程列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/css/user.css" media="all" />
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1041315_n1zmpydjv1.css">
</head>
<body class="childrenBody">
<fieldset class="layui-elem-field">
    <legend>流程查询</legend>
    <div class="layui-field-box">
        <form class="layui-form">
            <div class="layui-form toolbar">
                开始时间：
                <div class="layui-input-inline">
                    <input class="layui-input"  placeholder="yyyy-MM-dd" height="20px" id="beginTime" autocomplete="off">
                </div>
                结束时间：
                <div class="layui-input-inline">
                    <input class="layui-input"  placeholder="yyyy-MM-dd" height="20px" id="endTime" autocomplete="off">
                </div>
                <div class="layui-input-inline">
                    <a class="layui-btn" lay-submit="" lay-filter="searchForm"><i class="iconfont icon-sousuo2"></i>查询</a>
                </div>
            </div>
        </form>
    </div>
    <div class="layui-col-md12">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-normal" id="createLeave">
                <i class="iconfont icon-xinzeng"></i>新建请假
            </button>
        </div>
    </div>
</fieldset>
<div class="layui-form users_list">
    <table class="layui-table" id="leave" lay-filter="leave"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="getProcImage"><i class="iconfont icon-chakanxiangqing" ></i>查看流程图</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="leaveDetail"><i class="iconfont icon-preview"></i>查看详情</a>
    </script>
</div>
<div id="page" style="text-align: center;"></div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/tools.js?t=1"></script>
<script   type="text/javascript"  th:inline="none">
    var $,common;
    layui.config({
        base: '/js/common/' //假设这是你存放拓展模块的根目录
    }).use(['layer','form','table','laypage','common'], function() {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form,
            laypage=layui.laypage,
            common=layui.common,
            table = layui.table;
        //表格变量

        table.render({
            elem: '#leave',
            even: true,
            url: 'showLeaveList',
            method: 'get',
            id:'leave',
            page: false,
            loading: true,
            width: $(parent.window).width() - 223,
            cols: [[
                {checkbox: true, fixed: true, width: '5%'}
                , {field: 'userName', title: '申请人', width: '8%', sort: true}
                , {field: 'beginTime', title: '开始时间', width: '10%', sort: true,templet: '<div>{{ layui.laytpl.toDateString(d.beginTime,"yyyy-MM-dd") }}</div>'}
                , {field: 'endTime', title: '结束时间', width: '10%', sort: true,templet: '<div>{{ layui.laytpl.toDateString(d.endTime,"yyyy-MM-dd") }}</div>'}
                , {field: 'status', title: '状态', width: '10%', sort: true}
                , {field: 'reason', title: '原因', width: '15%', sort: true}
                , {field: 'days', title: '天数', width: '5%', sort: true}
                , {field: 'processInstanceId', title: '流程定义id', width: '10%', sort: true}
                , {field: 'text', title: '操作', toolbar:'#barDemo'}

            ]],
            done: function(res, curr, count){
                //pages=res.page;
                counts=res.count;
                //完整功能
                laypage.render({
                    elem: 'page'
                    ,count: counts,
                    first: '首页',
                    last: '尾页'
                    ,layout: ['count', 'prev', 'page', 'next',  'refresh', 'skip']
                    ,theme: '#00A0E9'
                    ,curr: curr
                    ,skip: true
                    ,jump: function(obj,first){
                        curr = obj.curr;

                        if(!first){
                            getData(obj.curr,obj.limit)
                        }
                    }
                });

            }

        });

            $("#createLeave").click(function () {
                var url = "addLeave";
                common.cmsLayOpen('申请请假', url, '66%', '66%');
            });
        function getData(page,limit){
            $.ajax({
                type: 'post',
                url: 'showAct?page='+page+"&limit="+limit,
                async: false,
                success: function (data) {
                    $(".layui-laypage-btn").click();
                    table.reload('leave',{
                        data : data,
                        page:{
                            curr:page
                        }
                    });

                }
            });
        }

        //监听工具条
        table.on('tool(leave)', function(obj){
            var data = obj.data;
            if(obj.event === "getProcImage"){
                layer.open({
                    id: 'leave-image',
                    type: 2,
                    area: [ '80%', '80%'],
                    fix: false,
                    maxmin: true,
                    shadeClose: false,
                    shade: 0.4,
                    title: '流程图',
                    content: "/leave/shinePics/"+data.processInstanceId
                });

            }else if(obj.event==='leaveDetail'){
                layer.open({
                    id: 'leave-detail',
                    type: 2,
                    area: [ '66%', '66%'],
                    fix: false,
                    maxmin: true,
                    shadeClose: false,
                    shade: 0.4,
                    title: '审核详情',
                    content: "leaveDetail?processId="+data.processInstanceId
                });
            }
        });
        //搜索
        form.on("submit(searchForm)",function(){
            var deploymentId = $('#deploymentId').val();
            var name = $('#name').val();
            table.reload('leave', {where: {
                    deploymentId: deploymentId,
                    name: name
                }
            });
        });

    });
</script>
</body>
</html>